import { Toast, List, InputItem, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import { Button, Flex } from 'antd-mobile';
import { Setting } from './Setting';

function failToast(mesage) {
  Toast.fail(mesage, 2);
}

class LoginT extends React.Component {
  state = {
    focused: false,
  }
  handClick = () => {
    var req = new Request( Setting.BaseUrl + 'login', {
      method: 'post',
      cache: 'reload',
      headers: {
        'Content-Type': 'application/json'
      },
      mode: 'cors',
      credentials: 'include',
      body: JSON.stringify({
        username: this.props.form.getFieldValue("username"),
        password: this.props.form.getFieldValue("password"),
      })
    });

    Toast.loading("正在登陆", 0);
    fetch(req).then( function(response) {
      return response.json();
    }).then( function(json) {
      Toast.hide();
      if( json.success ){
        window.location.href = "personal.html"
      }else{
        Toast.fail( json.error, 2 );
      };
    }).catch( function(ex) {
      Toast.hide();
      Toast.fail( "服务器错误", 2 );
      console.log ('parsing failed', ex );
    });
  };

  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div className="login-div">
        <div className="logo">
          <img src={`${Setting.BaseUrl}images/logo.png`}/>
          <h1>中央财经大学<br />推免生报名系统</h1>
        </div>
 		    <List>
          <InputItem
            placeholder="用户名/手机号"
            {...getFieldProps('username')}
          ></InputItem>
        </List>
        <WhiteSpace />
        <List>
          <InputItem
            placeholder="密码"
            type="password"
            {...getFieldProps('password')}
          ></InputItem>
        </List>
        <WhiteSpace size="lg"/>
        <Flex>
          <Flex.Item>
            {/* <a href="forget.html">忘记密码?</a> */}
            <span>&nbsp;</span>
          </Flex.Item>
          <Flex.Item style={{textAlign: 'right'}}>
            <a href="register.html">现在注册</a>
          </Flex.Item>
        </Flex>
        <WhiteSpace size="lg" />
        <Button className="btn" type="primary" onClick={this.handClick}>登录</Button>
      </div>
    );
  }
}

const Login = createForm()(LoginT);

export default Login
